<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="name" label="员工编号" align="center" />
      <el-table-column align="center" prop="name" label="姓名" />
      <el-table-column align="center" prop="date" label="提交时间" />
      <el-table-column label="变更前" align="center">
        <el-table-column prop="name" label="部门" align="center" />
        <el-table-column prop="name" label="科室" align="center" />
        <el-table-column prop="name" label="专业技术职务" align="center" min-width="120" />
      </el-table-column>
      <el-table-column label="变更后" align="center">
        <el-table-column prop="name" label="部门" align="center" />
        <el-table-column prop="name" label="科室" align="center" />
        <el-table-column prop="name" label="专业技术职务" align="center" min-width="120" />
      </el-table-column>
      <el-table-column prop="name" label="状态" min-width="150" align="center" />
      <el-table-column prop="date" label="变更时间" min-width="150" align="center" />
      <el-table-column label="操作" align="center" width="160">
        <template>
          <el-button size="mini" type="text" @click="open=true">审核</el-button>
          <el-button size="mini" type="text" @click="open=true">查看详情</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--审核/查看详情-->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <div>
        <el-row class="headerbox" style="margin-bottom: 20px;">
          <el-col :span="24">
            <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">个人信息</span></div>
            <el-divider class="divider" />
          </el-col>
        </el-row>
        <el-descriptions :column="2" style="padding-left: 20px;">
          <el-descriptions-item label="员工编号">{{ DetaliList.employeeCode }}</el-descriptions-item>
          <el-descriptions-item label="员工姓名">{{ DetaliList.employeeName }}</el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ DetaliList.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="所属科室">{{ DetaliList.postName }}</el-descriptions-item>
          <el-descriptions-item label="专业技术职务">{{ DetaliList.dutiesValue }}</el-descriptions-item>
        </el-descriptions>
        <el-row class="headerbox" style="margin: 20px 0;">
          <el-col :span="24">
            <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">申请信息</span></div>
            <el-divider class="divider" />
          </el-col>
        </el-row>
        <el-descriptions :column="2" style="padding-left: 20px;">
          <el-descriptions-item label="转入部门">{{ DetaliList.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="转入科室">{{ DetaliList.employeeName }}</el-descriptions-item>
          <el-descriptions-item label="计划到岗时间">{{ DetaliList.date }}</el-descriptions-item>
          <el-descriptions-item label="变更专业技术职务">{{ DetaliList.postName }}</el-descriptions-item>
        </el-descriptions>
        <el-row class="headerbox" style="margin: 20px 0;">
          <el-col :span="24">
            <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">审批流程</span></div>
            <el-divider class="divider" />
          </el-col>
        </el-row>
        <div v-if="activities.length>1" class="timelineProcessBox">
          <el-timeline class="timeline">
            <el-timeline-item
              v-for="activity in activities"
              :key="activity.ordId"
              class="lineitem"
              placement="top"
              :class="activity.goThere=='true' || activity.status=='通过' ? 'active' : activity.status=='不通过'?'failRedActive':'inactive'"
              :timestamp="activity.content"
            >
              <span style="display: flex; flex-direction: column">
                <!-- <span style="margin: 10px 0; font-size: 12px">
                                {{ activity.content }}
                                </span> -->
                <span class="spanlt">
                  {{ activity.currentNode }}
                </span>
              </span>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(2)">审核通过</el-button>
        <el-button type="primary" @click="submitForm(-1)">驳回</el-button>
        <el-button @click="open=false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->

  </div>

</template>

<script>
//   import { listMechanism } from "@/api/hr/department";
export default {
  data() {
    return {
      title: '申请信息',
      form: {},
      queryform: {},
      open: false,
      bumenList: [],
      keshiList: [],
      DetaliList: {
        employeeCode: '001',
        employeeName: '王小虎',
        departmentName: '行政',
        postName: '纪检监察室',
        dutiesValue: '办公室副主任兼精神康复治疗三科护士长',
        date: '2016-05-03'
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      dialogTitle: { // 弹框标题
        Approval: '选择审批人',
        SendP: '选择抄送人'
      },
      // 假数据
      activities: [
        {
          content: '已完成',
          time: '2024-08-29 20:46',
          currentNode: '发起申请',
          done: true
        },
        {
          content: '进行中',
          currentNode: '吉吉国王审批中',
          done: false,
          time: '2024-09-03 20:46'
        },
        {
          content: '待进行',
          done: false,
          currentNode: '',
          time: ''
        },
        {
          content: '待进行',
          currentNode: '',
          done: false,
          time: ''
        }
      ]
    }
  },
  methods: {
    getList() {},
    handleAdd() {
      this.form = {}
      this.open = true
    },
    submitForm(e) {},
    // 获取部门科室
    getDepartList() {
      listMechanism({ state: 1 })
        .then((res) => {
          this.deparmentList = res.data
          this.deparmentListCopy = 123
          // console.log(this.deparmentListCopy, "呼呼呼");
        })
        .then(() => {
          let bumenList
          //   = this.deparmentList.filter((item) => {
          //   return item.id == this.form.institutionId;
          // });
          for (const i in this.deparmentList) {
            if (this.deparmentList[i].id == this.form.institutionId) {
              bumenList = this.deparmentList[i].dson
            }
          }
          this.bumenList = bumenList
          let keshiList
          for (const a in this.bumenList) {
            if (this.bumenList[a].id == this.form.departmentId) {
              keshiList = this.bumenList[a].dson
            }
          }

          this.keshiList = keshiList

          // console.log(this.keshiList, "科室");
        })
    },
    bumenChange(e) {
      this.keshiList = []
      this.form.postId = undefined
      const curr = this.bumenList?.filter((item) => {
        return item.id == e
      })

      this.keshiList = curr[0]?.dson
    }
  }
}
</script>
  <style scoped lang="scss">
    .app-container {
        padding: 20px;
    }
    .headerbox{
        border-width: 0px;
        width: 100%;
        span{
            float: left;
            font-weight: 500;
            font-style: normal;
            font-size: 18px;
        }
        .span1{
            border-width: 0px;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 6px;
            height: 20px;
            background: inherit;
            background-color: rgba(37, 97, 239, 1);
            border: none;
            border-radius: 8px;
        }
    }
    .divider{
        float: right;
        width: 85%;
        margin: 10px 0;
    }
    ::v-deep .el-card__body{
        padding: 20px 20px 30px;
        display: flex;
        align-items: center;
        .btnBox{
            display: flex;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            border-color: #1890ff;
            border-width: 1px;
            border-style: dashed;
            align-items: center;
            justify-content: center;
            img{
                width: 40%;
                height: 40%;
            }
        }
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
    .timelineProcessBox {
        .timeline {
            display: flex;
            width: 100%;
            margin: 40px auto;
            .lineitem {
                transform: translateX(50%);
                width: 25%;
            }
        }
    }
    ::v-deep .el-timeline-item__tail {
        border-left: none;
        border-top: 2px solid #e4e7ed;
        width: 100%;
        position: absolute;
        top: 6px;
    }
    ::v-deep .el-timeline-item__wrapper {
        padding-left: 0;
        position: absolute;
        top: 20px;
        transform: translateX(-50%);
        text-align: center;
    }
    ::v-deep .el-timeline-item__timestamp {
        font-size: 14px;
        color: #D8BC37;
        color: #eee;
    }
  </style>
